<template>
    <div>
        <h1>会员信息显示</h1>
        名称：<input type="text" v-model="Cha.MName">
        年龄：<input type="text" v-model="Cha.Age">-<input type="text" v-model="Cha.Eage">
        会员等级:
        <select v-model="Cha.LeveId">
            <option value="0">请选择</option>
            <option v-for="a in bang" :value="a.LeveId">{{a.LeveName}}</option>
        </select>
        <input type="button" value="查询" @click="Show">
        <input type="button" value="重置" @click="Chong">

        <a href="/MemberAdd">新增会员信息</a>
        <a href="/LeveShow">显示会员等级信息</a>
        <table class="table">
            <thead>
                <tr>
                    <td>会员编号</td>
                    <td>用户名</td>
                    <td>密码</td>
                    <td>会员等级名称</td>
                    <td>会员头像</td>
                    <td>会员年龄</td>
                    <td>会员状态</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody v-for="a in data">
                <tr>
                    <td>{{a.MId}}</td>
                    <td>{{a.MName}}</td>
                    <td>****</td>
                    <td>{{a.LeveName}}</td>
                    <td><img :src="'https://localhost:7174/'+a.MImg" style="width: 60px;height: 60px;"></td>
                    <td>{{a.MAge}}</td>
                    <td>{{a.MState?"启用":"禁用"}}</td>
                    <td>
                        <input type="button" value="修改状态" @click="UpdState(a.MId)">
                        <input type="button" value="修改" @click="Fan(a.MId)">
                    </td>
                </tr>
            </tbody>
        </table>

一共{{page.zys}}页，一共{{page.zhs}}行，第{{Cha.Pageindex}}页，每页{{Cha.PageSize}}行



        <input type="button" value="首页"@click="fy(1)">
        <input type="button" value="上一页"@click="fy(2)">
        <input type="button" value="下一页"@click="fy(3)">
        <input type="button" value="尾页"@click="fy(4)">

    </div>
</template>

<script setup lang="ts">
import { ref ,onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
onMounted(()=>{
    Show()
    Xia()
})


//下拉框
const bang =ref([{
    "LeveId": 0,
    "LeveName": "",
    "LeveState": true,
    "QYId": 0
}])

const Xia = ()=>{
    axios.get('https://localhost:7174/api/Member/Xia').then(res=>{
        bang.value = res.data;
    })
}


const Chong = ()=>{
    Cha.value.MName="",
    Cha.value.Age=0,
    Cha.value.Eage=0,
    Cha.value.LeveId=0,
    Show()
}


const data = ref([{
    "MId": 0,
      "MName": "",
      "MPass": "",
      "MImg": "62bc0a5c-43be-4be2-8945-16cff4fdef653.jpg",
      "MState": null,
      MAge:0,
      "LeveId": 0,
      "LeveName": ""
}])


const Cha =ref({
    Pageindex:1,
    PageSize:2,
    MName:"",
    Age:0,
    Eage:0,
    LeveId:0
})

const page = ref({
    zhs:0,
    zys:0
})

const fy = (e:any)=>{
    if(e==1){
        Cha.value.Pageindex=1;
        Show();
    }

    if(e==2){
        if(Cha.value.Pageindex>1){
            Cha.value.Pageindex-=1;
            Show();
        }
    }
    if(e==3){
        if(Cha.value.Pageindex<page.value.zys){
            Cha.value.Pageindex+=1;
            Show();
        }
    }



    if(e==4){
        Cha.value.Pageindex=page.value.zys;
        Show();
    }
}






const Show=()=>{
    axios.get('https://localhost:7174/api/Member/ShowMember',{params:Cha.value}).then(res=>{
        data.value = res.data.list
        page.value.zhs=res.data.count;
        page.value.zys=Math.ceil(page.value.zhs/Cha.value.PageSize)
    })
}
//修改状态
const UpdState = (e:any)=>{
    if(confirm('确定修改吗？')){
        axios.get('https://localhost:7174/api/Member/UpdState',{params:{MId:e}}).then(res=>{
            if(res.data>0){
                alert('修改成功');
                Show()
            }
            else{
                alert('修改失败')
            }
        })
    }
    
}

//反填
const router = useRouter();
const Fan=(a:any)=>{
    router.push({path:"/MemberUpd",query:{MId:a}})
}




</script>

<style scoped>

</style>